<template>
	<view class="page-content">
		<image src="../../static/monitor/bg.jpg" mode="widthFix" class="bg"></image>
		<view class="canvas-wrap">
			<canvas class="progress-bg" canvas-id="cpbg"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasId: "cpbg",
				size: '',
				num: 350,
				canvasWidth:uni.upx2px(750),
				canvasHeight:uni.upx2px(400),
				x:0,
				y:0
			}
		},
		onReady() {
			this.size = this.$store.state.screenSize
			this.x = this.canvasWidth / 2
			this.y = this.canvasHeight / 2
			this.drawProgressbg()
		},
		onLoad() {

		},
		methods: {
			drawProgressbg() {
				var ctx = uni.createCanvasContext(this.canvasId, this)
				var x = this.x
				var y = 145
				
				var circleObj = {
				    ctx: ctx,
				    /*圆心*/
				    x: x,
				    y: y,
				    /*半径*/
				    radius: 100,//半径比canvas宽的一半要小
				    /*环的宽度*/
				    lineWidth: 1
				};
				circleObj.startAngle = 0;
				circleObj.endAngle = Math.PI * 2; // 对应 360° 的 1/4 即 90°
				circleObj.color = '#1994FD';
				this.drawCircle(circleObj);
				
				this.drawScale(ctx)
				
				/*灰色的圆环*/
				circleObj.radius = 92
				circleObj.lineWidth = 8
				circleObj.startAngle = Math.PI * 2;
				circleObj.endAngle = Math.PI * 2 / 4; // 对应 360° 的 1/4 即 90°
				circleObj.color = '#133483';
				this.drawCircle(circleObj);
				
				/*有色的圆环*/
				/*开始的度数-从上一个结束的位置开始*/
				circleObj.startAngle = circleObj.endAngle;
				/*结束的度数 Math.PI * 2 */
				circleObj.endAngle = Math.PI * 2;
				var gradient = ctx.createLinearGradient(0, 0, 170, 0)
				gradient.addColorStop(0,"#00FFFF")
				gradient.addColorStop(0.2,"#498FE4")
				gradient.addColorStop(0.4,"#4CD964")
				gradient.addColorStop(0.6,"#09BB07")
				gradient.addColorStop(0.8,"#DD524D")
				gradient.addColorStop(1,"#FF3333")
				circleObj.color = gradient
				this.drawCircle(circleObj);
				
				ctx.draw()
				
				// ctx.setLineWidth(1)
				// ctx.setStrokeStyle("#1994FD")
				// ctx.setLineCap("square")
				// ctx.beginPath()
				// ctx.arc(x, y, 100, 0 * Math.PI, 2 * Math.PI)
				// ctx.stroke()

				// ctx.setLineWidth(8)
				// ctx.setStrokeStyle("#133483")
				// ctx.setLineCap("square")
				// ctx.beginPath()
				// ctx.arc(x, y, 92, 0 * Math.PI, 2 * Math.PI)
				// ctx.stroke()
				
				// this.drawCircle({
				// 	ctx: ctx,
				// 	x: x,
				// 	y: y,
				// 	radius: 92,
				// 	lineWidth: 8
				// }, () => {
				// 	ctx.draw()
				// })
				
				// ctx.translate(width / 2, height / 2); // 将画布原点移动到中心位置
				// ctx.scale(-1, 1); // 翻转180°
				// ctx.rotate(-Math.PI / 2); // 旋转-90°
				
				
				
				
				
			},
			drawScale(ctx){
				for (var i = 0; i < 60; i++) {
					ctx.save()
					ctx.setStrokeStyle("#465584")
					ctx.translate(this.size.width / 2, 145)
					ctx.rotate(6 * Math.PI / 180 * i)
					ctx.beginPath()
					ctx.setLineWidth(2)
				
					ctx.moveTo(0, -78)
					ctx.lineTo(0, -75)
					ctx.stroke()
					ctx.closePath()
					ctx.restore()
				}
			},
			drawCircle(circleObj) {
				let ctx = circleObj.ctx;
				ctx.beginPath();
				ctx.arc(
					circleObj.x, 
					circleObj.y, 
					circleObj.radius, 
					-circleObj.startAngle, 
					-circleObj.endAngle, 
					false
				);
				//设定曲线粗细度
				ctx.lineWidth = circleObj.lineWidth;
				//给曲线着色
				ctx.strokeStyle = circleObj.color;
				//连接处样式
				ctx.lineCap = 'round';
				//给环着色
				ctx.stroke();
				ctx.closePath();
				// circleObj.startAngle = Math.PI * 2 / 4;
				// /*结束的度数 Math.PI * 2 */
				// circleObj.endAngle = Math.PI * 2;
				// let ctx = circleObj.ctx;
				
				// // circleObj.color = "#dd6200";
			    
			 //    ctx.beginPath();
				
			 //    ctx.arc(
				// 	circleObj.x, 
				// 	circleObj.y, 
				// 	circleObj.radius, 
				// 	circleObj.startAngle, 
				// 	circleObj.endAngle, false);
			 //    //设定曲线粗细度
			 //    ctx.lineWidth = circleObj.lineWidth;
			 //    //给曲线着色
			 //    ctx.strokeStyle = circleObj.color;
			 //    //连接处样式
			 //    ctx.lineCap = 'round';
			 //    //给环着色
			 //    ctx.stroke();
			 //    ctx.closePath();
				
				// return callback()
			},
			drawProgressCircle(){
				
				
				
				// ctx.scale(-1, 1); // 翻转180°
				// ctx.rotate(-Math.PI / 2)
				// circleObj.ctx.save()
				// /*有色的圆环*/
				// /*开始的度数-从上一个结束的位置开始*/
				// circleObj.startAngle = circleObj.endAngle;
				// /*结束的度数 Math.PI * 2 */
				// circleObj.endAngle = Math.PI * 2;
				// var gradient = circleObj.ctx.createLinearGradient(this.canvasWidth / 2, 0, 0, this.canvasHeight)
				// gradient.addColorStop(0, "#00FFFF")
				// gradient.addColorStop(0.2, "#498FE4")
				// gradient.addColorStop(0.4, "#4CD964")
				// gradient.addColorStop(0.6, "#09BB07")
				// gradient.addColorStop(0.8, "#DD524D")
				// gradient.addColorStop(1, "#FF3333")
				// circleObj.color = gradient
				// this.drawCircle(circleObj)
			},
			drawArc(ctx, callback) {
				let text = this.num
				const startAngle = -90;
				const endAngle = (this.num) * 360 - 90;
				ctx.beginPath();
				ctx.arc(this.size.width/2, 100, 92, (Math.PI / 180) * startAngle, (Math.PI / 180) * endAngle);
				const g = ctx.createLinearGradient(0, 0, 0, 90);
				g.addColorStop(0, '#FF3333'); //开始颜色
				g.addColorStop(1, '#007AFF'); //结束颜色
				ctx.strokeStyle = g;
				ctx.stroke();
				ctx.closePath();
				// tag 给进度值拼接上%
				text = `${text}` + '%';
				const myText = ctx.measureText(text);
				ctx.font = '14px DINOT-Medium ';
				ctx.fillStyle = 'rgba(0,0,0,0.25)';
				ctx.fillText(text, 50, 60);
				
				return callback()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.canvas-wrap {
		width: 750upx;
		height: 750upx;
	}

	.progress-bg {
		width: 750upx;
		height: 750upx;
	}
</style>
